<template>
  <div style="font-size: 0.3rem">
    <p
      style="
        height: 1rem;
        line-height: 1rem;
        background: #fff;
        margin-left: 0.4rem;
      "
    >
      <span @click="router.back(-1)"><</span>
      <span style="margin-left: 2.7rem">收银台</span>
    </p>
    <div
      style="
        width: 100%;
        height: 11rem;
        background: #efeeee;
        margin-top: -0.4rem;
      "
    >
      <div
        style="
          width: 6.6rem;
          height: 4.2rem;
          background: #fff;
          margin-left: 0.5rem;
          padding-top: 0.4rem;
          border-radius: 0.1rem;
        "
        v-for="(item, index) in list"
        :key="index"
      >
        <p style="text-align: center; font-size: 0.3rem">请支付金额</p>
        <p
          style="
            text-align: center;
            font-size: 0.65rem;
            color: #124ff5;
            font-weight: bold;
          "
        >
          ￥{{ item.doctorprice }}.00
        </p>
        <p style="margin-left: 0.4rem">服务类型：图文问诊</p>
        <p style="margin-left: 0.4rem">
          服务医生：{{ item.doctorname }} {{item.doctoradministre}} {{ item.doctorstate }}
        </p>
        <p style="margin-left: 0.4rem">
          服务价格：￥{{ item.doctorprice }}.00/次
        </p>
      </div>
      <p style="margin-left: 0.4rem; margin-top: 0.4rem; font-size: 0.35rem">
        请选择支付方式
      </p>
      <div
        style="
          width: 6.6rem;
          height: 1.2rem;
          background: #fff;
          margin-left: 0.5rem;
          margin-top: 0.4rem;
          border-radius: 0.1rem;
        "
      >
        <p style="height: 1.2rem; line-height: 1.2rem">
          <span>
            <van-icon
              name="alipay"
              style="
                color: #124ff5;
                font-size: 0.9rem;
                margin-left: 0.4rem;
                margin-right: 0.2rem;
                margin-top: 0.15rem;
              "
            />
          </span>
          <span
            style="
              display: inline-block;
              margin-top: -0.2rem;
              font-size: 0.4rem;
            "
          >
            支付宝
          </span>
          <span
            style="
              display: inline-block;
              margin-top: 0.4rem;
              margin-right: 0.4rem;
              font-size: 0.4rem;
              float: right;
            "
          >
            <van-checkbox v-model="checked"></van-checkbox>
          </span>
        </p>
      </div>
      <div style="margin-top: 3.4rem; margin-left: 0.5rem">
        <button
          style="
            width: 6.6rem;
            height: 1rem;
            background: #124ff5;
            color: #fff;
            border: none;
            border-radius: 0.2rem;
          "
          @click="goPayment"
        >
          立即支付
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { doctorPictures } from '../../../api/index'

import axios from 'axios'

const router = useRouter()

const checked = ref(true)

//定义数据类型
interface DoctorData {
  doctorname: string
  doctorstate: string
  doctordescword: string
  doctorgood: number
  doctortime: number
  doctorbrowse: number
  doctorprice: number
}

const list = ref<DoctorData[]>([]) //定义一个数组，用来存储接口返回的数据
const doctordata = async () => {
  //调用接口
  await doctorPictures()
    .then(res => {
      list.value = res.data.data.slice(0, 1) //截取数组的前条数据
    })
    .catch(error => {
      // 处理 AxiosError
      console.error('Axios请求出错:')
    })
}
doctordata()

const allPrice = ref(0)

// 点击立即支付
const goPayment = async () => {
  console.log('提交订单')
  console.log(list.value[0].doctorprice)
  allPrice.value = list.value[0].doctorprice
  console.log(allPrice.value)
  await axios
    .get('http://localhost:8000/pay', {
      params: {
        id: new Date().getTime().toString(),
        title: '问诊',
        price: allPrice.value,
      },
    })
    .then(res => {
      console.log(res)

      if (res.data.code === 200) {
        window.open(res.data.result)
      }
    })
    localStorage.setItem('allPrice', allPrice.value.toString())
    localStorage.setItem('doctorname', list.value[0].doctorname)
    localStorage.setItem('doctoradministre', list.value[0].doctoradministre)
    localStorage.setItem('doctorcity', list.value[0].doctorcity)
    localStorage.setItem('doctorstate', list.value[0].doctorstate)
}
</script>

<style>
.bbb {
  background: #124ff5;
}
</style>
